<template>
	<view class="container">
		<view class="blue_bg" />

		<view :class="{'QRcode':true,
        'over':maintain_info_list.state === 0,
        'overdue':maintain_info_list.state === -1}">
			核销码:WS78SK086
			<image src="@/static/images/ryx/QRcode.png" alt="" />
		</view>

		<view class="maintain_info">
			<uni-section title="维修信息">
				<uni-list>
					<view v-for="(item,index) in maintain_info_list" :key="index">
						<uni-list-item :border="false" :title="maintain_info_til[index]" :rightText="item.toString()" />
					</view>
				</uni-list>
			</uni-section>
		</view>

		<view class="car_info">
			<uni-section title="车辆信息">
				<uni-list>
					<view v-for="(item,index) in car_info_list" :key="index">
						<uni-list-item :border="false" :title="car_info_til[index]"
							:rightText="typeof item === 'string'? item : item.toString()" />
						<view class="" v-if="index === 'car_img'">
							<image src="@/static/images/ryx/QRcode.png" alt="" />
						</view>
						<view class="" v-if="index === 'maintain_imgs'">
							<image src="@/static/images/ryx/QRcode.png" alt="" />
							<image src="@/static/images/ryx/QRcode.png" alt="" />
						</view>
					</view>
				</uni-list>
			</uni-section>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				maintain_info_til: {
					id: '维修单号',
					state: '维修状态',
					name: '车主姓名',
					phone: '联系方式',
					method: '维修方式',
					address: '取车位置',
					scheduledDate: '预约日期',
					submitDate: '提交日期'
				},
				maintain_info_list: {
					id: 37283,
					state: 1,
					name: '张',
					phone: '19928919382',
					method: '上门取车',
					address: '山阳区43号',
					scheduledDate: '2022/11/11 11:00',
					submitDate: '2022/11/11 11:00'
				},
				car_info_til: {
					type: '车辆类型',
					id: '车牌号',
					car_img: '整车照片',
					maintain_imgs: '维修部位照片'
				},
				car_info_list: {
					type: '大客车',
					id: '京A888888',
					car_img: '',
					maintain_imgs: ""
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	@import '@/static/images/ryx/all.css';

	.QRcode {
		width: 90vw;
		margin: 20rpx;
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		border-radius: 20rpx;
		text-align: center;
		background-color: #fff;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.QRcode image {
		height: 200rpx;
		width: 200rpx;
		margin-top: 10rpx;
	}

	.over {
		color: #b2b2b2;
	}

	.over image {
		opacity: 0.5;
	}

	.overdue {
		display: none;
	}

	.maintain_info {
		width: 90vw;
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.car_info {
		width: 90vw;
		margin: 20rpx;
	}

	.car_info image {
		height: 150rpx;
		width: 150rpx;
		margin-left: 3vw;
	}
</style>